<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交需求</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #ffffff;
            position: relative;
        }
        /* 确保容器宽度一致 */
        .container-wrapper {
            max-width: 414px;
            margin: 0 auto;
        }
        /* 主色调蓝紫色 */
        .primary-color {
            color: #6366f1; /* indigo-500 */
        }
        .primary-bg {
            background: #6366f1;
        }
        .primary-light-bg {
            background: #eef2ff; /* indigo-50 */
        }
        /* 卡片浅灰背景 */
        .card-bg {
            background: #f9fafb; /* gray-50 */
        }
        /* 按钮点击效果 */
        .clickable {
            transition: all 0.2s ease;
        }
        .clickable:active {
            transform: scale(0.98);
            opacity: 0.8;
        }
        /* 主按钮（类似参考图的粉色按钮） */
        .primary-button {
            background: #6366f1;
            color: white;
            border: none;
            border-radius: 12px;
            padding: 14px;
            width: 100%;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .primary-button:active {
            background: #4f46e5;
            transform: scale(0.98);
        }
        /* 表单卡片样式 */
        .form-card {
            background: white;
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        /* 留白充足 */
        .section-spacing {
            margin-bottom: 24px;
        }
        /* 输入框样式 */
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.2s;
            background: #ffffff;
            box-sizing: border-box;
        }
        .form-input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        .form-input::placeholder {
            color: #9ca3af;
        }
        /* 选项样式（单选和多选通用） */
        .option-item {
            padding: 12px 16px;
            background: #f9fafb;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            position: relative;
        }
        .option-item:hover {
            border-color: #d1d5db;
            transform: translateY(-1px);
        }
        .option-item:active {
            transform: scale(0.98);
        }
        .option-item.selected {
            border-color: #6366f1;
            background: #eef2ff;
            font-weight: 500;
        }
        .option-item input[type="radio"],
        .option-item input[type="checkbox"] {
            margin-right: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        /* 附件上传区域 */
        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 12px;
            padding: 32px 16px;
            text-align: center;
            transition: all 0.2s;
            cursor: pointer;
            background: #fafafa;
        }
        .upload-area:hover {
            border-color: #6366f1;
            background: #eef2ff;
        }
        .upload-area:active {
            transform: scale(0.98);
        }
        /* 文本域样式 */
        .form-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.2s;
            background: #ffffff;
            min-height: 120px;
            resize: vertical;
            font-family: inherit;
            box-sizing: border-box;
        }
        .form-textarea:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        .form-textarea::placeholder {
            color: #9ca3af;
        }
        /* 下拉框样式 */
        .form-select {
            width: 100%;
            padding: 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.2s;
            background: #ffffff;
            cursor: pointer;
            box-sizing: border-box;
        }
        .form-select:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        /* 日期选择器样式 */
        .form-date {
            width: 100%;
            padding: 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.2s;
            background: #ffffff;
            cursor: pointer;
            box-sizing: border-box;
        }
        .form-date:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        /* 上传图片预览 */
        .upload-preview {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 12px;
        }
        .upload-preview-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            background: #f3f4f6;
        }
        .upload-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .upload-preview-item .remove-btn {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .upload-preview-item .remove-btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }
        /* 表单标签样式 */
        .form-label {
            display: block;
            color: #374151;
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 15px;
        }
        .form-label .required {
            color: #ef4444;
            margin-left: 2px;
        }
        /* 安全区域适配（iPhone X等） */
        @supports (padding-bottom: env(safe-area-inset-bottom)) {
            .bottom-button-wrapper {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }
        /* 隐藏文件输入 */
        #file-input {
            display: none;
        }
    </style>
</head>
<body class="bg-white">
    <!-- 顶部标题栏 -->
    <div class="bg-white px-4 py-3 flex items-center justify-between sticky top-0 z-40 container-wrapper border-b border-gray-100">
        <div class="flex items-center">
            <i class="fas fa-arrow-left text-gray-600 text-xl mr-4 clickable" onclick="window.history.back()" aria-label="返回"></i>
            <div class="text-lg font-semibold text-gray-800">提交需求</div>
        </div>
    </div>

    <!-- 表单内容 -->
    <div class="px-4 py-6 pb-24">
        <!-- 需求标题 -->
        <div class="form-card">
            <label class="form-label">
                需求标题<span class="required">*</span>
            </label>
            <input 
                type="text" 
                id="requirement-title" 
                class="form-input" 
                placeholder="一句话概述需求"
                required
            >
        </div>

        <!-- 需求类型 -->
        <div class="form-card">
            <label class="form-label">
                需求类型<span class="required">*</span>
            </label>
            <select id="requirement-type" class="form-select" required>
                <option value="">请选择需求类型</option>
                <option value="development">企业服务</option>
                <option value="design">管理咨询</option>
                <option value="customization">AI+RPA</option>
                <option value="integration">流程自动化</option>
                <option value="other">数字化转型</option>
            </select>
        </div>

        <!-- 需求描述 -->
        <div class="form-card">
            <label class="form-label">
                需求描述<span class="required">*</span>
            </label>
            <textarea 
                id="requirement-description" 
                class="form-textarea" 
                placeholder="详细描述业务场景, 需协同APP"
                required
            ></textarea>
        </div>

        <!-- 预算范围 -->
        <div class="form-card">
            <label class="form-label">
                预算范围
            </label>
            <div class="space-y-2">
                <label class="option-item" onclick="toggleRadio(this, 'budget')">
                    <input type="radio" name="budget" value="1k-5k">
                    <span>1k-5k</span>
                </label>
                <label class="option-item" onclick="toggleRadio(this, 'budget')">
                    <input type="radio" name="budget" value="5k-10k">
                    <span>5k-10k</span>
                </label>
                <label class="option-item" onclick="toggleRadio(this, 'budget')">
                    <input type="radio" name="budget" value="10k+">
                    <span>10k+</span>
                </label>
            </div>
        </div>

        <!-- 上传附件 -->
        <div class="form-card">
            <label class="form-label">
                上传附件
            </label>
            <input type="file" id="file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx" onchange="handleFileSelect(event)">
            <div class="upload-area" onclick="document.getElementById('file-input').click()">
                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
                <p class="text-gray-600 text-sm mb-1">点击上传图片或文件</p>
                <p class="text-gray-400 text-xs">最多9张/个</p>
            </div>
            <div class="upload-preview" id="upload-preview"></div>
        </div>
    </div>

    <!-- 底部提交按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 bottom-button-wrapper z-50" style="max-width: 414px; margin: 0 auto;">
        <button class="primary-button clickable" onclick="submitRequirementAndRedirect()">
            <i class="fas fa-paper-plane mr-2"></i>
            提交需求
        </button>
    </div>
    <script>
        function submitRequirementAndRedirect() {
            // 原来的提交逻辑可以放这里（校验、提交数据等）
            // submitRequirement(); // 如果有校验和提交要执行

            // 假定表单校验通过，跳转至需求详情页
            window.location.href = 'customer-requirement-detail.html';
        }
    </script>

    <script>
        let uploadedFiles = [];

        // 切换单选选项
        function toggleRadio(element, name) {
            const radio = element.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
                // 移除同组其他选项的选中样式
                document.querySelectorAll(`input[name="${name}"]`).forEach(input => {
                    const parent = input.closest('.option-item');
                    if (parent) {
                        parent.classList.remove('selected');
                    }
                });
                // 添加当前选项的选中样式
                element.classList.add('selected');
            }
        }

        // 处理文件选择
        function handleFileSelect(event) {
            const files = Array.from(event.target.files);
            const remainingSlots = 9 - uploadedFiles.length;
            
            if (files.length > remainingSlots) {
                alert(`最多只能上传9个文件，当前已有${uploadedFiles.length}个，还可以上传${remainingSlots}个`);
                return;
            }

            files.forEach(file => {
                if (uploadedFiles.length >= 9) {
                    return;
                }

                uploadedFiles.push(file);
                
                const previewItem = document.createElement('div');
                previewItem.className = 'upload-preview-item';
                previewItem.dataset.filename = file.name;

                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewItem.innerHTML = `
                            <img src="${e.target.result}" alt="${file.name}">
                            <button class="remove-btn" onclick="removeFile('${file.name}')" type="button">
                                <i class="fas fa-times"></i>
                            </button>
                        `;
                    };
                    reader.readAsDataURL(file);
                } else {
                    previewItem.innerHTML = `
                        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 8px;">
                            <i class="fas fa-file text-2xl text-gray-400 mb-2"></i>
                            <span style="font-size: 10px; color: #6b7280; text-align: center; word-break: break-all;">${file.name.length > 10 ? file.name.substring(0, 10) + '...' : file.name}</span>
                        </div>
                        <button class="remove-btn" onclick="removeFile('${file.name}')" type="button">
                            <i class="fas fa-times"></i>
                        </button>
                    `;
                }

                document.getElementById('upload-preview').appendChild(previewItem);
            });

            // 重置文件输入，允许再次选择相同文件
            event.target.value = '';
        }

        // 移除文件
        function removeFile(filename) {
            uploadedFiles = uploadedFiles.filter(file => file.name !== filename);
            const previewItem = document.querySelector(`.upload-preview-item[data-filename="${filename}"]`);
            if (previewItem) {
                previewItem.remove();
            }
        }

        // 初始化：为已选中的选项添加样式
        document.addEventListener('DOMContentLoaded', function() {
            // 处理单选
            document.querySelectorAll('input[type="radio"]:checked').forEach(radio => {
                const parent = radio.closest('.option-item');
                if (parent) {
                    parent.classList.add('selected');
                }
            });
        });

        // 提交需求
        function submitRequirement() {
            // 验证必填项
            const title = document.getElementById('requirement-title').value.trim();
            if (!title) {
                alert('请输入需求标题');
                document.getElementById('requirement-title').focus();
                return;
            }

            const type = document.getElementById('requirement-type').value;
            if (!type) {
                alert('请选择需求类型');
                document.getElementById('requirement-type').focus();
                return;
            }

            const description = document.getElementById('requirement-description').value.trim();
            if (!description) {
                alert('请输入需求描述');
                document.getElementById('requirement-description').focus();
                return;
            }

            // 收集所有数据
            const formData = {
                title: title,
                type: type,
                description: description,
                expectedDeliveryTime: document.getElementById('expected-delivery-time').value || '',
                budget: document.querySelector('input[name="budget"]:checked')?.value || '',
                files: uploadedFiles.map(file => ({
                    name: file.name,
                    size: file.size,
                    type: file.type
                }))
            };

            console.log('需求数据:', formData);
            
            // 模拟提交
            alert('需求提交成功！');
            // 这里可以添加实际的提交逻辑
            // window.location.href = 'customer-requirement-list.html';
        }
    </script>
</body>
</html>
